<template>
  <div class="terms-container max-w-4xl mx-auto p-4 md:p-8">
    <h1 class="text-3xl font-bold mb-8 text-center text-gray-800">使用条款</h1>
    <div class="space-y-6">
      <section>
        <h2 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">
          1. 协议的接受与修改
        </h2>
        <p
          class="text-gray-600 leading-relaxed"
          style="text-align: justify; line-height: 1.8"
        >
          欢迎使用Music
          Dreamer悦享音乐平台。本使用条款构成用户与平台之间具有法律约束力的协议。使用本平台即表示您同意接受这些条款的约束。我们保留随时修改这些条款的权利，修改后的条款将立即生效。
        </p>
      </section>
      <section>
        <h2 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">
          2. 用户行为规范
        </h2>
        <p
          class="text-gray-600 leading-relaxed"
          style="text-align: justify; line-height: 1.8"
        >
          用户在使用平台服务时应遵守中华人民共和国相关法律法规。禁止上传含有暴力、色情、政治敏感等违法违规内容。用户需对自己的账号安全负责，不得将账号借给他人使用。
        </p>
      </section>
      <section>
        <h2 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">
          3. 知识产权
        </h2>
        <p
          class="text-gray-600 leading-relaxed"
          style="text-align: justify; line-height: 1.8"
        >
          用户上传的原创内容版权归创作者所有。用户保证其上传的内容拥有合法版权或使用授权。平台有权对侵权内容进行下架处理。平台本身的著作权、商标权等知识产权受法律保护。
        </p>
      </section>
      <section>
        <h2 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">
          4. 服务变更与终止
        </h2>
        <p
          class="text-gray-600 leading-relaxed"
          style="text-align: justify; line-height: 1.8"
        >
          平台保留随时变更、中断或终止服务的权利。对违反使用条款的用户，平台有权暂停或终止其使用权限。服务终止后，平台不承担为用户保留或继续提供任何数据的义务。
        </p>
      </section>
      <section>
        <h2 class="text-xl font-semibold mb-4 text-gray-700 border-b pb-2">
          5. 免责声明
        </h2>
        <p
          class="text-gray-600 leading-relaxed"
          style="text-align: justify; line-height: 1.8"
        >
          平台不对用户上传内容的准确性、合法性承担责任。对因不可抗力、网络服务中断等导致的损失，平台不承担赔偿责任。用户因违反本协议造成的任何损失由其自行承担。
        </p>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
section {
  @apply bg-white rounded-lg shadow-sm p-6 transition-all duration-300;
  border: 1px solid #eee;
}

section:hover {
  @apply shadow-md transform -translate-y-1;
}

h2 {
  @apply text-xl font-semibold mb-4 text-gray-700 border-b pb-2;
}

p {
  @apply text-gray-600 leading-relaxed;
  text-align: justify;
  line-height: 1.8;
}
</style>
